<template>
  <div id="app">
    <router-view name="login"/>
    <el-container style="min-height:100vh">
      <el-aside :width="w" style="background-color: #2e2e2e">
        <My-Menu></My-Menu>
      </el-aside>
      <el-container style="border-left: 1px solid #e6e6e6;">
        <el-header style="padding: 0">
          <Inline-Head></Inline-Head>
        </el-header>
        <el-main>
          <transition name="slide-left">
            <router-view class="child-view"/>
          </transition>
        </el-main>
        <el-footer>
          <Inline-Foot></Inline-Foot>
        </el-footer>
      </el-container>
    </el-container>

  </div>
</template>

<script>
  import MyMenu from '@/components/common/menu'
  import InlineHead from '@/components/common/inlineHead'
  import InlineFoot from '@/components/common/inlineFooter'
  import {mapGetters} from 'vuex'
    export default {
        name: 'app',
        components: {
            MyMenu,InlineHead,InlineFoot
        },
        computed:{
            w(){
                if(this.isCollapsed){
                    return '64px'
                } else {
                    return '200px'
                }
            },
            ...mapGetters(['isCollapsed'])
        },
        data() {
            return {
                transitionName: 'slide-left'
            }
        },
        watch: {
            '$route'(to, from) {
                const toDepth = to.path.split('/').length;
                const fromDepth = from.path.split('/').length;
                this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
            }
        }
    }
</script>

<style>
  body{
    background: #f6;
    box-sizing: border-box;
  }
  body, html, ul, li {
    padding: 0;
    margin: 0;
  }

  li {
    list-style: none;
  }
  a{
    text-decoration: none;
    color: #000;
  }
  .child-view {
    flex: 1;
    height: 100%;
  }
  #app{
    min-height: 100vh;
  }
  .slide-left-enter, .slide-right-leave-active {
    opacity: 0;
    transform: translate(-80px, 0);
  }
  .slide-left-leave-active, .slide-right-enter {
    opacity: 0;
    transform: translate(100%, 0);
  }
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }
  .my-input{
    width: 80% !important;
  }
  .flex-content{
    flex: 1;
  }
</style>
